<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>验证</title>
		<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	</head>
	<body>
		<!--has-error-->
		<form class="form-horizontal" role="form" style="width: 500px;margin: auto;margin-top: 50px;">
		  <div class="form-group">
		    <label class="col-sm-2 control-label" for="inputError">姓名</label>
		    <div class="col-sm-10">
		      <input name="name" va-rules="need&len(<10)" type="text" class="form-control" >
		    </div>
		  </div>
		  <div class="form-group">
		    <label class="col-sm-2 control-label" for="inputError">年龄</label>
		    <div class="col-sm-10">
		      <input name="age" va-rules="age:num(<999,>10)"  type="text" class="form-control" >
		    </div>
		  </div>
		  <div class="form-group">
		      <label for="disabledSelect" class="col-sm-2 control-label">年级</label>
		      <div class="col-sm-10">
		        <select name="grade" va-rules="need" id="disabledSelect" class="form-control">
		           <option></option>
		          <option>一年级</option>
		          <option>二年级</option>
		          <option>三年级</option>
		        </select>
		      </div>
		  </div>
		  <div class="form-group">
		    <label class="col-sm-2 control-label" for="inputError">联系电话</label>
		    <div class="col-sm-10">
		      <input name="tel" va-rules="need&telephone" type="text" class="form-control" >
		    </div>
		  </div>
		  <div class="form-group">
		    <label class="col-sm-2 control-label" for="inputError">用户名</label>
		    <div class="col-sm-10">
		      <input name="username" va-rules="need&ajax(./user.json)" va-para="" type="text" class="form-control" >
		    </div>
		  </div>
		   <div class="form-group">
		    <label class="col-sm-2 control-label" for="inputError">密码</label>
		    <div class="col-sm-10">
		      <input name="pwd" va-rules="need&len(>6,<18)" va-para="" type="password" class="form-control" >
		    </div>
		  </div>
		   <div class="form-group">
		    <label class="col-sm-2 control-label" for="inputError">重复密码</label>
		    <div class="col-sm-10">
		      <input name="pwd2" va-rules="need(==pwd)&len(>6,<18)" va-para="" type="password" class="form-control" >
		    </div>
		  </div>
		  <div class="form-group">
		    <label class="col-sm-2 control-label" for="inputError">备注</label>
		    <div class="col-sm-10">
		      <textarea name="describe" va-rules="len(<20)" type="text" class="form-control" ></textarea>
		    </div>
		  </div>
		  <!--日期，时间，单选，复选等-->
		  <div class="form-group">
		  	<label class="col-sm-2 control-label"></label>
		    <div class="col-sm-10">
		       <button type="button" class="btn btn-default">提交</button>
		    </div>
		  </div>
		</form>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="jquery-validate-beta.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			validConfig({
				onGetLabel:function(el){
					return $(el).closest(".form-group").children("label").text();
				},
				onError:function(elems,allChecked){
					elems.forEach(function(el){
						$(el).closest(".form-group").addClass("has-error");
						var $tips=$(el).parent().find(".help-block");
						if($tips.length){
							$tips.text(el.errmsg)
						}else{
							$(el).parent().append('<small class="help-block">'+el.errmsg+'</small>');	
						}
					});
					if(allChecked){
						setTimeout(function(){
							elems[0].focus();
						});
					}
				},
				onReset:function(elems){
					elems.forEach(function(el){
						$(el).closest(".form-group").removeClass("has-error").find(".help-block").remove();
					});
				},
				onAjaxJudge:function(d){
					
				}
			});
			var va=$("form").bindValid();
			$('button').click(function(){
				va.validate();
			})
		</script>
	</body>
</html>
